<template>
  <div class="container" @click="clickHandle('test click', $event)">

    <div v-if="userInfo" class="userinfo" @click="bindViewTap">
      <img class="avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover"/>
      <div class="nickname">
        <card :text="userInfo.nickName"></card>
      </div>
    </div>
    <button v-else open-type="getUserInfo">点击获取用户信息</button>

    <div class="usermotto">
      <div class="user-motto">
        <card :text="motto"></card>
      </div>
    </div>

    <form class="form-container">
      <input type="text" class="form-control" v-model="motto" placeholder="v-model"/>
      <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy"/>
    </form>
    <a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>
    <a href="/pages/gank/main" class="counter">去往gank Demo</a>
    <a href="/pages/network-test/main" class="counter">测试网络框架</a>
    <a class="counter" @click.stop="toSetting">设置</a>
    <a class="counter" href="/pages/main/main">进入周边首页</a>
  </div>
</template>

<script>
  import card from "@/components/card";
  import { network } from "../../utils/network-util";

  export default {
    data() {
      return {
        motto: "Hello World",
        userInfo: {}
      };
    },

    components: {
      card
    },

    methods: {
      bindViewTap() {
        const url = "../logs/main";
        wx.navigateTo({ url });
      },
      async showUserInfo() {
        // 调用登录接口
        return await wx.pro.getUserInfo({ withCredentials: false });
      },
      clickHandle(msg, ev) {
        console.log("clickHandle:", msg, ev);
      },
      toSetting() {
        wx.openSetting();
      }
    },

    created() {
      // 调用应用实例的方法获取全局数据
      this.showUserInfo().then(result => {
        this.userInfo = result.userInfo;
      });
    }
  };
</script>

<style lang="stylus" scoped>
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    .nickname {
      color: #aaa;
    }
  }

  .usermotto {
    margin-top: 150px;
  }

  .form-control {
    display: block;
    padding: 0 12px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
  }

  .counter {
    display: inline-block;
    margin: 10px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }
</style>
